<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">

        <title>jQuery UI Selectables - Test Page</title>

        <link rel="stylesheet" href="../../../themes/light/light.selectables.css" type="text/css" media="print, projection, screen">
        <script type="text/javascript" src="../../../jquery/src/core.js"></script>
        <script type="text/javascript" src="../../../jquery/src/selector.js"></script>
        <script type="text/javascript" src="../../../jquery/src/event.js"></script>
        <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
        <script type="text/javascript" src="../../../jquery/src/fx.js"></script>
        <script type="text/javascript" src="../../../jquery/src/offset.js"></script>
	<script type="text/javascript" src="../ui.mouse.js"></script>
	<script type="text/javascript" src="../ui.selectable.js"></script>
        
        <style type="text/css" media="screen, projection">

            /* Not required for Selectables, just to make this demo look better... */

            body {
                font-size: 16px; /* @ EOMB */
            }
            * html body {
                font-size: 100%; /* @ IE */
            }
            body * {
                font-size: 87.5%;
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            body * * {
                font-size: 100%;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }

#selectable1 .ui-selecting {
	background: #aad284;
}
#selectable1 .ui-selected {
	background: #e2ecf5;
}

#selectable2 {
	border: 1px solid green;
	padding: 5px;
}
#selectable2 div {
	margin: 10px;
	border: 1px solid navy;
	padding: 5px;
}
#selectable2 .ui-selected {
	outline: 1px dotted gray;
	border: 1px solid #def !important;
}

        </style>
    </head>
    <body class="light">
        <h1><a href="http://jquery.com">jQuery</a> UI Selectables - Test Page</h1>

	<div style="width:400px;">
        
	<ul id="selectable1">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
		<li>Item 6</li>
		<li>Item 7</li>
		<li>Item 8</li>
	</ul>


	<div id="selectable2">
	selectable
		<div>div 1<span>span 1</span></div>
		<div><span>span 2</span>child 2</div>
		<div>div 3</div>
		<span>span 3</span>
		<div>div 4</div>
		<div>div 5</div>
		<div>div 6</div>
		<div>div 7</div>
		<div>div 8</div>
	</div>


	</div>

        <script type="text/javascript">
            $(function() {

		$("#selectable1").selectable();

		$("#selectable2").selectable({
			filter: "div",
			selecting: function(ev, ui) {
				$(ui.selecting).text('selecting');
			},
			selected: function(ev, ui) {
				$(ui.selected).text('selected');
			},
			unselecting: function(ev, ui) {
				$(ui.unselecting).text('unselecting');
			},
			unselected: function(ev, ui) {
				$(ui.unselected).text('unselected');
			}
		});

            });
        </script>

    </body>
</html>